<template>
  <el-card
    shadow="never"
    class="border-0"
  >
    <ListHeader
      @refresh="getData"
      @create="handleCreate"
    ></ListHeader>
    <!-- 默认展开一级 -->
    <el-tree
      :data="tableData"
      :props="{ label: 'name', children: 'child' }"
      v-loading="loading"
      node-key="id"
      :default-expanded-keys="defaultExpandedKeys"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <el-tag
            size="small"
            :type="data.menu ? 'primary' : 'info'"
          >
            {{ data.menu ? "菜单" : "权限" }}
          </el-tag>
          <el-icon
            v-if="data.icon"
            :size="16"
            class="ml-2"
          >
            <component :is="data.icon"></component>
          </el-icon>
          <span>{{ data.name }}</span>
          <div class="ml-auto">
            <el-switch
              :modelValue="data.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange($event, data)"
            />

            <el-button
              text
              type="primary"
              size="small"
              @click.stop="handleEdit(data)"
            >
              修改
            </el-button>

            <el-button
              text
              type="primary"
              size="small"
              @click.stop="addChild(data.id)"
            >
              增加
            </el-button>

            <el-popconfirm
              title="是否要删除该记录?"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="handleDelete(data.id)"
            >
              <template #reference>
                <el-button
                  text
                  type="primary"
                  size="small"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </template>
    </el-tree>

    <!-- 新增公告 -->
    <FormDrawer
      ref="formDrawerRef"
      :title="drawerTitle"
      @submit="handleSubmit"
    >
      <el-form
        :model="form"
        ref="formRef"
        :rules="rules"
        label-width="80px"
        :inline="false"
      >
        <el-form-item
          label="上级菜单"
          prop="rule_id"
        >
          <!-- 
              checkStrictly 是否严格的遵守父子节点不互相关联
              emitPath 	在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
           -->

          <el-cascader
            v-model="form.rule_id"
            :options="options"
            :props="{
              value: 'id',
              label: 'name',
              children: 'child',
              checkStrictly: true,
              emitPath: false,
            }"
            placeholder="请选择上级菜单"
          />
        </el-form-item>

        <el-form-item
          label="菜单/规则"
          prop="menu"
        >
          <el-radio-group v-model="form.menu">
            <el-radio
              :value="1"
              border
              >菜单</el-radio
            >
            <el-radio
              :value="0"
              border
              >规则</el-radio
            >
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="名称"
          prop="name"
        >
          <el-input
            v-model="form.name"
            placeholder="名称"
            style="width: 30%"
          >
          </el-input>
        </el-form-item>

        <el-form-item
          label="菜单图标"
          prop="icon"
          v-if="form.menu == 1"
        >
          <IconSelect v-model="form.icon" />
        </el-form-item>

        <el-form-item
          label="前端路由"
          prop="frontpath"
          v-if="form.menu == 1 && form.rule_id > 0"
        >
          <el-input
            v-model="form.frontpath"
            placeholder="前端路由"
          >
          </el-input>
        </el-form-item>

        <el-form-item
          label="后端规则"
          prop="condition"
          v-if="form.menu == 0"
        >
          <el-input
            v-model="form.condition"
            placeholder="后端规则"
          >
          </el-input>
        </el-form-item>

        <el-form-item
          label="请求方式"
          prop="method"
          v-if="form.menu == 0"
        >
          <el-select
            v-model="form.method"
            placeholder="请输入请求方式"
            class="m-2"
          >
            <el-option
              v-for="item in ['GET', 'POST', 'PUT', 'DELETE']"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="排序"
          prop="order"
        >
          <el-input-number
            v-model="form.order"
            :min="0"
            :max="1000"
          />
        </el-form-item>
      </el-form>
    </FormDrawer>
  </el-card>
</template>

<script setup>
import { ref } from "vue";

const defaultExpandedKeys = ref([]);

import ListHeader from "~/components/ListHeader.vue";
import FormDrawer from "~/components/FormDrawer.vue";
import IconSelect from "~/components/IconSelect.vue";

import {
  getRuleList,
  createRule,
  updateRule,
  updateRuleStatus,
  deleteRule,
} from "~/api/rule.js";

import { useInitTable, useInitForm } from "~/composables/useCommon.js";

const options = ref([]);

const { loading, tableData, getData, handleDelete, handleStatusChange } =
  useInitTable({
    getList: getRuleList,
    onGetListSuccess: (res) => {
      options.value = res.rules;
      tableData.value = res.list;
      defaultExpandedKeys.value = res.list.map((o) => o.id);
    },
    delete: deleteRule,
    updateStatus: updateRuleStatus,
  });

const {
  formDrawerRef,
  formRef,
  form,
  rules,
  drawerTitle,
  handleSubmit,
  handleCreate,
  handleEdit,
} = useInitForm({
  form: {
    rule_id: 0,
    menu: 0,
    name: "",
    condition: "",
    method: "GET",
    status: 1,
    order: 50,
    icon: "",
    frontpath: "",
  },
  rules: {},
  getData,
  update: updateRule,
  create: createRule,
});

// 添加子分类
const addChild = (id) => {
  // handleCreate打开侧滑是有一个重置表单的功能，所以
  // 这句必须放在form.rule_id=id;前面
  handleCreate();
  form.rule_id = id;
  form.status = 1;
};
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
}

.el-tree-node__content {
  padding: 20px 0;
}
</style>
